<template>
  <card>
    <p slot="title">
        <Icon type="compose"></Icon>
        基本信息
    </p>
    <Form ref="formItem" :model="formItem" :rules="ruleForm" :label-width="120">
        <Row type="flex">
            <Col span="6">
                <FormItem label="等级名称：" prop="levelName">
                    <Input v-model="formItem.levelName" size="large" placeholder="请填写内容..."></Input>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="会员级别：" prop="level">
                    <Select v-model="formItem.level" size="large" style="width:100%" :label-in-value=true>
                        <Option :value="1" :key="1">等级1</Option>
                        <Option :value="2" :key="2">等级2</Option>
                        <Option :value="3" :key="3">等级3</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="折扣率：" prop="discount">
                    <InputNumber style="width: 100%" size="large" v-model="formItem.discount"></InputNumber>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="升级金额：" prop="upAmount">
                    <InputNumber style="width: 100%" size="large" :min="0" v-model="formItem.upAmount"></InputNumber>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="6">
                <FormItem label="指定充值金额：" prop="storeAmount">
                    <InputNumber style="width: 100%" size="large" :min="1" v-model="formItem.storeAmount"></InputNumber>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="下一等级：" prop="nextLevelId">
                    <Select @on-change="changeSelect" v-model="formItem.nextLevelId" style="width: 100%" size="large" :label-in-value=true>
                        <Option v-for="item in levels" :value="item.id" :key="item.id">{{ item.levelName }}{{item.level}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="是否默认：" prop="nextLevelId">
                    <Checkbox v-model="single" @on-change="changeCheckbox"></Checkbox>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex">
            <Col span="24">
                <FormItem>
                    <Button @click="save" size="large" type="primary">保存</Button>
                    <Button @click="close" size="large" type="ghost" style="margin-left: 8px">关闭</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
  </card>
</template>

<script>
export default {
    data () {
        return {
            baseURL: '/user/member/level',
            brands: [],
            levels: [],
            formItem: {
                id: '',
                levelName: '',
                level: '',
                discount: '',
                upAmount: '',
                storeAmount: '',
                nextLevelId: '',
                nextLevelName: '',
                isDefault: false
            },
            ruleForm: {
                levelName: [
                    { required: true, message: '请填写等级名称', pattern: /.+/, trigger: 'change' }
                ],
                level: [
                    { required: true, message: '请选择级别', pattern: /.+/, trigger: 'change' }
                ],
                discount: [
                    { required: true, message: '请填写折扣率', pattern: /.+/, trigger: 'change' }
                ],
                upAmount: [
                    { required: true, message: '请填写升级金额', pattern: /.+/, trigger: 'change' }
                ],
                storeAmount: [
                    { required: true, message: '请填写最低充值金额', pattern: /.+/, trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        init () {
            // 加载会员等级
            this.loadLevel()
            // 表单初始化
            this.$bus.fillData(this.formItem, this.$route.query.row)
        },
        loadLevel () {
            let url = this.baseURL + '/findAll'
            this.$ajax.get(url).then((response) => {
                let {code, data, msg} = response.data
                if (code === 0) {
                    this.levels = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        save () {
            this.$refs['formItem'].validate((valid) => {
                if (valid) {
                    let url = this.baseURL + '/saveOrUpdate'
                    this.$ajax.post(url, this.formItem).then((response) => {
                        let {code, msg} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', '保存成功')
                            this.$bus.init(this.formItem)
                            this.resetForm()
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                }
            })
        },
        changeSelect (option) {
            this.formItem.nextLevelName = option.label
        },
        changeCheckbox (value) {
            if (value) {
                this.formItem.isDefault = 1
            } else {
                this.formItem.isDefault = 0
            }
        },
        resetForm () {
            this.$refs.formItem.resetFields()
        },
        close () {

        }
    },
    mounted () {
        this.init()
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init()
        })
    }
}
</script>

<style>

</style>
